<!DOCTYPE html>
<html>

<head>
    <title>使用 JavaScript 在 canvas 上绘制花球</title>
    <meta charset="utf-8" />
    <script type="application/javascript">
        function f(x, y, k, n) {
            var centerX = x + k / 2.0;
            var centerY = y + k / 2.0;
            var r = k / 2.0;
            var pts = new Array();
            var deg = 0;
            var degDelta = 2 * Math.PI / n;
            for (var i = 0; i < n; i++) {
                pts.push({
                    "x": centerX + Math.cos(deg) * r,
                    "y": centerY + Math.sin(deg) * r
                });
                deg += degDelta;
            }

            var org_svg = document.getElementsByTagName('svg')[0]; //Get svg element

            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            svg.setAttribute("width", 1000);
            svg.setAttribute("height", 1000);

            for (i = 0; i < pts.length; ++i) {
                for (j = 0; j < pts.length; ++j) {
                    if (i == j) continue;
                    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'line'); //Create a path in SVG's namespace
                    newElement.setAttribute("x1", pts[i]["x"].toString());
                    newElement.setAttribute("y1", pts[i]["y"].toString());
                    newElement.setAttribute("x2", pts[j]["x"].toString());
                    newElement.setAttribute("y2", pts[j]["y"].toString());
                    newElement.setAttribute("stroke", "red");
                    newElement.setAttribute("stroke-width", "1")
                    svg.appendChild(newElement);
                }
            }
            org_svg.replaceWith(svg);
        }

        function draw() {
            var n = document.getElementById("edge_num").value;
            f(25, 25, 500, Number.parseInt(n));
        }
    </script>
</head>

<body onload="f(25,25,500,23)">
    Input the number of edges:
    <input type="text" id="edge_num" onchange="draw()">
    <button onclick="draw()">Submmit</button>
    <svg>
    </svg>
</body>

</html>